import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, DatePicker, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getCardList } from '@/services/userCenter/card/list'

const { RangePicker } = DatePicker

// 表头
const columns = [
  {
    title: '昵称',
    dataIndex: 'receiveName',
    key: 'receiveName',
    align: 'center'
  },
  {
    title: '卡号',
    dataIndex: 'cardCode',
    key: 'cardCode',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center'
  },
  {
    title: '余额',
    dataIndex: 'balance',
    key: 'balance',
    align: 'center'
  },
  {
    title: '消费总金额',
    dataIndex: 'consumeBalance',
    key: 'consumeBalance',
    align: 'center'
  },
  {
    title: '充值总金额',
    dataIndex: 'rechargeBalance',
    key: 'rechargeBalance',
    align: 'center'
  },
  {
    title: '消费总次数',
    dataIndex: 'consumeNum',
    key: 'consumeNum',
    align: 'center'
  },
  {
    title: '领取时间',
    dataIndex: 'date',
    key: 'date',
    align: 'center'
  }
]

const List = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [cardList, setCardList] = useState([])
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [startTime, setStartTime] = useState('')
  const [endTime, setEndTime] = useState('')

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {

  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        cardCode: values.cardCode,
        startTime,
        endTime,
        pageNo,
        pageSize,
        minBalance: values.minBalance,
        maxBalance: values.maxBalance,
        phone: values.phone,
        receiveName: values.receiveName
      }
      console.log(params)
      return
      await getCardLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="卡号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('cardCode', {})
              (<Input placeholder="请输入卡号" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="领取人" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('receiveName', {})
              (<Input placeholder="请输入领取人" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="手机号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('phone', {})
              (<Input placeholder="请输入手机号" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="领取时间" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('date', {})
              (<RangePicker onChange={selectData} />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="余额最小值" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('minBalance', {})
              (<Input placeholder="请输入余额最小值" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="余额最大值" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('maxBalance', {})
              (<Input placeholder="请输入余额最大值" />)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 获取会员卡列表
  const getCardLists = async (params) => {
    let res = await getCardList(params)
    if (res.code === '0') {
      setCardList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      let params = {
        pageNo: page,
        pageSize,
        status
      }
      getCardLists(params)
    }
  }
  // 选择时间
  const selectData = (date, dateString) => {
    setStartTime(dateString[0])
    setEndTime(dateString[1])
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={cardList}
        rowKey={record => record.id}
        pagination={pagination}
        rowSelection={rowSelection}
      />
   </PageHeaderWrapper>
  )
}

export default Form.create()(List)
